<template>
  <div class="wrapper">
    <div
      class="icon"
      v-for="item of iconList"
      :key="item.id"
    >
      <div class="icon-img">
        <img
          class="img"
          :src="item.imgUrl"
          :class="[item.color]"
        >
      </div>
      <div class="icon-desc">{{item.desc}}</div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'homeCatalog',
  props:{
      iconList:Array
    },
  data(){
    return {
            red:'red',
            orange:'orange',
            green:'green',
            blue:'blue'
  }
}}
</script>


<style lang="stylus" scoped>
.wrapper
  background:#fff
  padding-top:.3rem
  .icon
    width:25%
    float:left
    .img
      display:block
      background:red
      border-radius:1rem
      margin:0 auto
      width:50%
    .red
      background:#fd6266
    .orange
      background:#fda424
    .green
      background:#6dcf16
    .blue
      background:#41a9f2
    .icon-desc
      text-align:center
      padding-top:.2rem
      padding-bottom:.3rem
</style>
